<template>
  <div>
    <BasicTable @rowClick="rowClick" :handle-search-info-fn="handleSearchInfoFn"
                @register="registerTable" :formActions="formActions" :rowSelection="rowSelection">
      <template #action="{record}">
        <a-popconfirm title="确定删除吗" @confirm="() => remove(record)">
          <a-button type="link" @click.stop="() => {}">删除</a-button>
        </a-popconfirm>
      </template>
    </BasicTable>
    <DataSourceModal ref="refDataSourceModal" @ok="reload" />
  </div>
</template>
<script setup>
import { onMounted, shallowRef } from "vue";
import { useListPage } from "@/hooks/system/useListPage";
import { defHttp } from "@/utils/http/axios";
import BasicTable from "@/components/Table/src/BasicTable.vue";
import { real } from "@/utils";
import { PlusOutlined } from "@ant-design/icons-vue";
import DataSourceModal from "./DataSourceModal.vue";

const Api = {
  getAllDataSource: "/cwqs/cwqsDataSource/list"
};
const refDataSourceModal = shallowRef();
defineOptions({ name: "DataSource" });
const formActions = [
  {
    type: "primary",
    title: "新建",
    icon: PlusOutlined,
    onClick: () => {
      refDataSourceModal.value.setData();
    }
  }
];
const columns = [
  {
    title: "数据源名称",
    dataIndex: "dataSourceName"
  },
  {
    title: "数据库类型",
    dataIndex: "dataSourceTypeName"
  },
  {
    title: "创建日期",
    dataIndex: "createTime"
  },
  {
    title: "备注",
    dataIndex: "remark"
  }
];
const getAllDataSource = (params) => defHttp.get({ url: Api.getAllDataSource, params });
const { tableContext } = useListPage({
  designScope: "data-source-list",
  tableProps: {
    title: "数据源列表",
    api: getAllDataSource,
    columns,
    formConfig: {
      schemas: [
        {
          label: "数据源名称",
          field: "dataSourceName",
          component: "Input",
          colProps: { span: 6 }
        }
      ],
    },
    rowSelection: {
      getCheckboxProps() {
        return {
          onClick(e) {
            e.stopPropagation();
          }
        }
      }
    }
  }
});

function remove(record) {
  record = real(record);
  defHttp.delete({
    url: "/cwqs/cwqsDataSource/delete",
    params: { id: record.id }
  }, { joinParamsToUrl: true }).then(reload);
}

function handleSearchInfoFn(info) {
  if (info.dataSourceName) info.dataSourceName = `*${info.dataSourceName}*`;
}

const [registerTable, { reload, updateTableDataRecord }, {
  rowSelection,
  selectedRows,
  selectedRowKeys
}] = tableContext;

function rowClick(record) {
  record = real(record);
  refDataSourceModal.value.setData(record.id);
}
</script>
